<template>
    <div class="role">
        <div class="clearfix text-r border-b-eded height-24 line-height-19 pl-20 pr-20">
            <a-button size="small" type="primary" icon="plus" class="pull-left mt-5" @click="addrole({},0)"></a-button>
            <a-button size="small" type="primary" icon="reload" class="mr-10" @click="tableReload"></a-button>
            <!--            <a-button size="small" type="primary" icon="vxe-icon&#45;&#45;menu">-->
            <!--                <i style="margin-top: -1px" class="vxe-icon&#45;&#45;menu"></i>-->
            <!--            </a-button>-->
        </div>
        <div>
            <p-remote-vxe-table
                    ref="remoteTable"
                    :data-fun="dataFun"
                    @afterLoad="afterLoad"
                    @afterLoadErr="afterLoadErr"
                    :params="params">
                <template slot-scope="{tablePage, data, loading, handlePageChange, sortChangeEvent}" :params="params">
                    <vxe-grid
                            border
                            resizable
                            auto-resize
                            sync-resize
                            size="mini"
                            :height="tableHeight"
                            :loading="loading"
                            :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
                            :pager-config="tablePage"
                            :columns="columns"
                            :sortConfig="{
                                remote: true,
                                trigger: 'cell',
                            }"
                            highlight-hover-row
                            highlight-current-row
                            highlight-hover-column
                            highlight-current-column
                            @sort-change="sortChangeEvent"
                            @page-change="handlePageChange"
                            :data="data">
                        <template v-slot:action="{ row, column }">
                            <div class="clearfix text-c">
                                <a-button size="small" type="primary" icon="edit" class="pull-left mb-10 mr-10" @click="addrole(row,1)"></a-button>
                                <a-button size="small" type="primary" class="pull-left mr-10" @click="authorMenu(row)">授权</a-button>
                                <a-button size="small" type="danger" icon="delete" class="pull-left" @click="delrole(row)"></a-button>
                            </div>
                        </template>
                    </vxe-grid>
                </template>
            </p-remote-vxe-table>
        </div>
        <add-role ref="addRole" @done="tableReload"></add-role>
        <author-menu ref="authorMenu" @done="tableReload"></author-menu>
    </div>
</template>

<script>
    let defaultColumns = [
        // 对应自定义插槽的名称
        { type: 'seq', fixed: 'left', title: '序号', width: 60, noColumnsSet: true, resizable: false },
        { title: '角色名称', minWidth: 150, align: 'center', field: 'roleName' },
        { title: '角色编码', minWidth: 150, align: 'center', field: 'roleCode' },
        { title: '操作', minWidth: 150, align: 'left', fixed: 'right', resizable: false, noColumnsSet: true, slots: { default: 'action'},},
    ];
    import addRole from './add';
    import authorMenu from './authorMenu';
    export default {
        components: {
            addRole,
            authorMenu
        },
        data () {
            return {
                dataFun: this.$api.permission.listbyrole,
                params: {
                    pageNum: 1,
                    pageSize: 20,
                    keywords: '',
                },
                columns: JSON.parse(JSON.stringify(defaultColumns)),
                loadingSearch: false,
            };
        },
        methods: {
            afterLoad () {
                this.loadingSearch = false;
                this.autoResetTableHeight();
            },
            afterLoadErr () {
                this.loadingSearch = false;
                this.autoResetTableHeight();
            },
            tableReload () {
                this.$refs['remoteTable'].reload(this.params);
            },
            //新增角色
            addrole (data,num) {
                let temObj = num === 0 ? data : {id: data.id, roleName: data.roleName,roleCode: data.roleCode} = data;
                this.$refs.addRole.show(temObj,'新增角色',num);
            },
            //删除角色
            delrole (data) {
                let _this = this;
                _this.$confirm({
                    title: '角色删除',
                    content: '是否确定删除该角色',
                    okText: '是',
                    okType: 'danger',
                    cancelText: '否',
                    onOk() {
                        _this.delRoleApi({id: data.id});
                    },
                });
            },
            delRoleApi (data) {
                this.$api.permission.deleterole(data).then(res => {
                    if (res && res.code !== 200) {
                        this.$message.error(res.errorMsg);
                        return;
                    }
                    this.$message.success('删除成功');
                    this.tableReload();
                }).catch(err => {
                    this.$message.error(err.errorMsg);
                });
            },
            //角色授权
            authorMenu (data) {
                this.$refs.authorMenu.show(data);
            }
        },
    };
</script>

<style scoped lang="scss">

</style>
